/*
 * Created: 2022-08-27 15:35:52
 * Author : 涛涛涛
 */

import React, { FC, useContext } from 'react';
import { View, Text, Image } from '@tarojs/components';
import { styled } from 'linaria/react';
import { useClassName } from '@/utils/index';
import { ProductExhibitionContext } from '@/pages/ProductExhibition/ProductExhibitionContext';

export interface IProps extends ICompProps {}
BodyDescription.defaultProps = {} as Partial<IProps>;
function BodyDescription(props: IProps) {
    const { className, style } = props;
    const localClassName = useClassName('BodyDescription', className);
    const { product } = useContext(ProductExhibitionContext);
    return (
        <RootView className={localClassName} style={style}>
            <View className="BodyDescription-top">
                <View className="avatar">
                    <Image className="img" src={product.author.avatarUrl}></Image>
                </View>
                <View className="description">{product.author.intro}</View>
            </View>
            <View className="BodyDescription-divider"></View>
            <View className="BodyDescription-bottom">
                <View className="otherInfo">{product.author.contact}</View>
            </View>
        </RootView>
    );
}
export default React.memo(BodyDescription as FC<IProps>);
const RootView = styled(View)`
    &.BodyDescription .BodyDescription-top {
        padding: 50px 30px;
        display: flex;
        .avatar {
            flex-shrink: 0;
            width: 140px;
            height: 140px;
            border-radius: 50%;
            overflow: hidden;
            > .img {
                display: block;
                width: inherit;
                height: inherit;
            }
        }
        .description {
            margin-left: 30px;
            font-size: 28px;
            word-break: break-all;
            line-height: 36px;
        }
    }
    &.BodyDescription .BodyDescription-divider {
        margin: 0 30px;
        border-bottom: 1px solid #ccc;
    }
    &.BodyDescription .otherInfo {
        padding: 50px 30px;
        font-size: 28px;
        color: #ff8828;
    }
`;
